<template>
	<view>
		<view class="introduction">
			<view class="search">
				<uv-row gutter="12">
					<uv-col span="10" style="height: 80rpx;">
						<uv-input v-model="key" class="search_input" placeholder="请输入要查找到的资源"
							prefixIcon="http://61.163.243.7:9999/digitallibrary/file/lengleng/search.png"
							prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
					</uv-col>
					<uv-col span="2">
						<view style="margin-left: 10rpx;text-align: center;margin-bottom: 13rpx;" @click="searchsTo">搜索
						</view>
					</uv-col>
				</uv-row>
			</view>
			<view class="image-container">
			<view class="image-item" v-for="item2 in listData">
<!-- 				<view class="resource_title">
					<text class="ellipsis" style="width: 70vw;">{{item2.name}}</text>
					<!					<view class="more">
						<text style="">查看更多</text>
						<image src="../../static/右箭头.png"
							style="width: 32rpx;height: 32rpx;position: relative;top: 2rpx;;"></image>
					</view> -->
<!-- 				</view> -->
				<view class="resources1" style="margin-top: 8rpx;">
						<uv-image @click="tiao(item2)" :customStyle="customStyle2" :lazy-load="true" radius="0rpx" :width="width" :height="height" :src="item2.cover"
							style="margin-bottom: 14rpx;"></uv-image>
						<view class="text-wrapper" style="font-size: 26rpx;">
							<text style="" class="ellipsisTo">{{item2.resourceName}}</text>
						</view>
						<view class="icon-wrapper" v-if="isTrue">
							<image class="icon" :src="playUrl"></image>
						</view>
				</view>
				<!-- <uv-divider class="divider1"></uv-divider> -->
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true,
			},
			isTrue: {
				type: Boolean,
				required: true,
			},
			height: {
				type: String,
				default: '292rpx'
			},
			width: {
				type: String,
				default: '208rpx'
			},
			customStyle2:{
				type: Object
			}
		},
		watch: {
			item: {
				handler(newData, oldData) {
					// 在 data 属性变化时执行的逻辑
					this.listData = newData;
					console.log('newData', newData)
					console.log('listData', this.listData)

					// 进行其他逻辑操作...
				}
			}
		},
		
		data() {
			return {
				playUrl: 'http://61.163.243.7:9999/digitallibrary/bookExposure/lengleng/video/wx/imagPlay.png',
				listData: [],
				key:'',
				style2:{
					boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
				}
			}
		},
		mounted() {
			this.inits()
		},
		methods: {
			tiao(e){
				console.log('e',e);
				if(e.dataTypeId=='1719628518976913409'){
					uni.navigateTo({
						url:'/pages/index/bookDetail/bookDetail?id='+e.resourceId
					})
				}else if(e.dataTypeId=='1719628549662441474'){
					uni.navigateTo({
						url:'/pages/index/audioDetails/audioDetails?id=' + e.resourceId
					})
					
				}else{
					uni.navigateTo({
						url:'/pages/index/journalDetails/journalDetails?id=' + e.resourceName
					})
					
				}
				
			},
			searchsTo(){
				console.log('rrr');
				this.$emit('keyVlalue',this.key);
			},
			inits() {
				this.listData = this.$props.item
			},
			onReachBottom() {
							console.log('123')
							this.$emit('page')
							// this.pageIndex++;
							// this.getPageList()
			},
		}
	};
</script>

<style scoped>
	.image-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5%;
	}
	
	.image-item {
		margin-left: 3.3%;
		margin-top: 3%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		/* 添加相对定位 */
		border-radius: 10rpx;
	
		/* 		margin-bottom: 5px; */
	}
	.ellipsis {
		max-width: 80vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
	}

	.ellipsisTo {
		max-width: 310rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		margin-top: 5%;
	}

	.divider1 {
		margin: 30rpx 0;
	}

	.icon-wrapper {
		position: absolute;
		bottom: 45rpx;
		right: 20rpx;
	}

	.icon {
		width: 52rpx;
		height: 50rpx;
	}

	.resources1 {
		flex: 0 0 calc(33.33%); /* 计算宽度，考虑到右边距 */
		   margin-bottom: 5px;
		   display: flex;
		   flex-direction: column;
		   align-items: flex-start;
		   position: relative;
		   border-radius: 10rpx;
		/* 将资源项左对齐 */
	}

	.resources1_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(33.33% - 8rpx);
		margin-bottom: 22rpx;
		margin-right: 8rpx;
		position: relative;
		height: 330rpx;
		/* 设置一个固定高度 */
	}

	.uv-image {
		height: 100%;
		/* 填充容器高度 */
	}

	.text-wrapper {
		width: 210rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		text-overflow: ellipsis !important;
		/* 文字左对齐 */
	}

	.more {
		font-size: 24rpx;
		color: #86909C;
		display: flex;
		align-items: center;
	}

	.resource_title {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.resources_container {
		display: flex;
		padding: 0 30rpx;
		margin-top: 32rpx;
	}

	.search {
		padding: 0 30rpx;
		margin-top: 4%;
	}

	.divider {
		position: relative;
		bottom: 31rpx;
	}

	.controller {

		height: 84rpx;
		position: relative;
	}

	.segmentedControl {
		margin-top: 48rpx;
	}

	.titile {
		margin-left: 20rpx;
		margin-top: 72rpx;
		font-size: 38rpx;
	}

	.container {
		font-size: 36rpx;
		font-family: my-font;
		padding-bottom: 100rpx;
	}
</style>